<template>
  <div class="intro-wrapper">
    <h1 class="intro-title">Vue+ts template</h1>
    <div class="intro-logo-container">
      <img class="intro-logo" :src="require('@/assets/logo.jpg')" alt="我的 Logo">
    </div>
      <a-row>
      <a-col>
        <a-space>
          <a-typography-title :level="5">Template correlation:</a-typography-title>
          <a-tag color="pink">vue3</a-tag>
          <a-tag color="red">typescript</a-tag>
          <a-tag color="orange">axios</a-tag>
          <a-tag color="green">ant design vue</a-tag>
        </a-space>
      </a-col>
      </a-row>
    <p class="intro-text">此外,使用ts封装了axios,简化了axios配置,简单配置快速使用</p>
  </div>
</template>

<script setup lang="ts">
const data:string[] = ['axios','vue desing vue','typescript','vue3']
</script>

<style scoped>
.intro-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.intro-title {
  font-size: 36px;
  font-weight: bold;
  margin-top: 80px;
  margin-bottom: 20px;
}


.intro-logo-container {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  overflow: hidden;
  margin-bottom: 40px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.intro-logo {
  width: 100%;
  height: 100%;
}

.intro-text {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px;
  margin-top: 20px;
}


.intro-list > li {
  font-size: 16px;
  line-height: 1.5;
}
</style>
